import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: '/recommend',
  },
  {
    path: '/rank',
    name: 'Rank',
    component: () => import('../views/rank/rank.vue'),
    children: [
      {
        path: ':id',
        name: 'RankDetail',
        component: () => import('../views/rank-detail/rank-detail.vue'),
      },
    ],
  },
  {
    path: '/user',
    name: 'UserCenter',
    component: () => import('../views/user-center/user-center.vue'),
  },
  {
    path: '/recommend',
    name: 'Recommend',
    component: () => import('../views/recommend/recommend.vue'),
    children: [
      {
        path: ':id',
        name: 'AlbumDetail',
        component: () => import('../views/album-detail/album-detail.vue'),
      },
    ],
  },
  {
    path: '/singer',
    name: 'Singer',
    component: () => import('../views/singer/singer.vue'),
    children: [
      {
        path: '/singer/:id',
        name: 'SingerDetail',
        component: () => import('../views/singer-detail/singer-detail.vue'),
      },
    ],
  },
  {
    path: '/search',
    name: 'Search',
    component: () => import('../views/search/search.vue'),
    children: [
      {
        path: '/search/:id',
        name: 'SingerDetail',
        component: () => import('../views/singer-detail/singer-detail.vue'),
      },
    ],
  },
];

const router = new VueRouter({
  routes,
});

export default router;
